<template>
  <div class="bottom-nav-bar">
    <div 
      class="nav-button" 
      :class="{ 'active': isActive('/home') }"
      @click="navigateTo('/home')"
    >
      <div class="nav-icon-wrapper">
        <el-icon class="nav-icon"><HomeFilled /></el-icon>
      </div>
    </div>
    
    <div 
      class="nav-button" 
      :class="{ 'active': isActive('/work-record') }"
      @click="navigateTo('/work-record')"
    >
      <div class="nav-icon-wrapper">
        <el-icon class="nav-icon"><Document /></el-icon>
      </div>
    </div>
    
    <div 
      class="nav-button" 
      :class="{ 'active': isActive('/profile') }"
      @click="navigateTo('/profile')"
    >
      <div class="nav-icon-wrapper">
        <el-icon class="nav-icon"><User /></el-icon>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { HomeFilled, Document, User } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

const isActive = (path) => {
  return route.path === path || route.path.startsWith(path + '/')
}

const navigateTo = (path) => {
  router.push(path)
}
</script>

<style lang="scss" scoped>
.bottom-nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 12px 20px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: #ffffff; /* 与页面边框颜色一致 */
  border-top: none;
  box-shadow: none;
  z-index: 1000;
  
  @media (max-width: 768px) {
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    gap: 16px;
  }
}

.nav-button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  
  // 默认状态：与背景一致，几乎不可见
  background: #ffffff;
  box-shadow: none;
  
  @media (max-width: 768px) {
    width: 48px;
    height: 48px;
  }
  
  &:hover:not(.active) {
    background: #f5f5f5;
    box-shadow: 
      inset 2px 2px 4px rgba(163, 177, 198, 0.2),
      inset -2px -2px 4px rgba(255, 255, 255, 0.8);
  }
  
  &.active {
    // 激活状态：凹陷效果（按下去的样子）
    background: #e8e8e8;
    box-shadow: 
      inset 6px 6px 12px rgba(163, 177, 198, 0.4),
      inset -6px -6px 12px rgba(255, 255, 255, 0.6);
    
    .nav-icon-wrapper {
      .nav-icon {
        color: #303133;
      }
    }
  }
  
  .nav-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    
    .nav-icon {
      font-size: 24px;
      color: #909399;
      transition: color 0.3s ease;
      
      @media (max-width: 768px) {
        font-size: 20px;
      }
    }
  }
  
  // 非激活状态的图标颜色
  &:not(.active) .nav-icon-wrapper .nav-icon {
    color: #909399;
    opacity: 0.5;
  }
}
</style>

